<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('Request详细信息')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="ibox-content">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#service_info" data-toggle="tab" aria-expanded="true">服务信息</a></li>
                    <li><a href="#sample_info" data-toggle="tab" aria-expanded="false">样品信息</a></li>
                    <li><a href="#request_info" data-toggle="tab" aria-expanded="false">服务申请信息</a></li>
                </ul>
                <div class="tab-content">
                    <!--服务信息-->
                    <div class="tab-pane active" id="service_info">
                        <table id="bootstrap-table-service"></table>
                    </div>

                    <!--样品信息-->
                    <div class="tab-pane" id="sample_info">

                    </div>

                    <!--服务申请信息-->
                    <div class="tab-pane" id="request_info">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none">
        <div class="col-sm-12 select-table table-striped" style="border-radius: 0px;">
            <div class="col-sm-2" style="padding-right: 0px; margin-top: 53px;padding-left: 5px">
                <div class="ibox-content" style="padding: 1px; border: 0px">
                    <div class="panel-body" style="margin: auto; padding-top: 0px;padding-right: 0px">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                            <span style="font: bold;font-size: large">[[${requestName}]]</span> ( <span style="color: #eea236">[[${requestStatus}]]</span>)
                                            <span class="fa arrow"></span></a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse">
                                    <div class="panel-body form-group">
                                        <label class="col-sm-3 control-label">Status: </label>
                                        <div class="col-sm-8">
                                            <select class="form-group">
                                                <option>[[${requestStatus}]]</option>
                                                <option></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default" style="margin-top: 1px">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Samples([[${sampleNum}]])<span class="fa arrow"></span></a>
                                    </h4>
                                </div>
                                <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel panel-default" style="border: 0px;margin-top: 0px" th:each="sample:${zkRequest.samples}">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#collapseTwo" th:href="'#collapseTwo-'+${sample.sampleId}">[[${sample.sampleName}]]</a>
                                            </h4>
                                        </div>
                                        <div th:id="'collapseTwo-'+${sample.sampleId}" class="panel-collapse collapse">
                                            <div class="panel-body">

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default" style="margin-top: 1px">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">document<span class="fa arrow"></span></a>
                                    </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <i class="fa fa-download"> document</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-10" style="padding-left: 0px">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:request:edit')}]];
    var serviceStatusDatas = [[${@dict.getType('sys_service_status')}]];
    var serviceProcessDatas = [[${@dict.getType('auto_exp_status')}]];
    var requestId = [[${requestId}]];
    var prefix = ctx + "system/request";

    $('.collapse').on('show.bs.collapse', function () {
        $('h4').each(function () {
            $(this).removeClass("active")
        })
        $(this).siblings('.panel-heading').children('h4').addClass("active");
    })

    $('.collapse').on('hide.bs.collapse', function () {
        $(this).siblings('.panel-heading').children('h4').removeClass("active");
    })

    $(function() {
        console.log("requestId = "+requestId)
        var options = {
            id: "bootstrap-table-service",
            url: prefix + "/detail/list",
            exportUrl: prefix + "/export",
            modalName: "Request",
            pagination: false,
            showSearch: false,
            queryParams : {
                requestId: requestId
            },
            columns:[
                [
                    {
                        field: 'serviceId',
                        title: '主键',
                        visible: false
                    },
                    {
                        field: 'expcode',
                        title: '唯一编码',
                        visible: false
                    },
                    {
                        field: 'serviceName',
                        title: 'Service'
                    },
                    {
                        field: 'sampleName',
                        title: 'Sample'
                    },
                    {
                        field: 'serviceType.svtypeName',
                        title: 'Service Type'
                    },
                    {
                        field: 'process',
                        title: 'Process',
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(serviceProcessDatas, value);
                        }
                    },
                    {
                        field: 'serviceStatus',
                        title: 'Status',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(serviceStatusDatas, value);
                        }
                    },
                    {
                        field: 'template.templateName',
                        title: 'Template'
                    },
                    {
                        field: 'expParams',
                        title: 'Params',
                        visible: false
                    },
                    {
                        field: 'instrument.instName',
                        title: 'Instrument'
                    },
                    {
                        field: 'instrument.type',
                        title: 'Instrument Type',
                        visible: false
                    },
                    {
                        field: 'priority',
                        title: 'priority',
                        formatter: function (value, row, index) {
                            if (value == '0'){
                                return 'NO';
                            }else {
                                return 'YES';
                            }

                        }
                    },
                    {
                        field: 'userVerifier.userName',
                        title: 'Service Verifier'
                    },
                    {
                        field: 'verifyResult',
                        title: 'Comment',
                        visible: false
                    },
                    {
                        field: 'startTime',
                        title: 'Start Time',
                        visible: false
                    },
                    {
                        field: 'endTime',
                        title: 'End Time',
                        visible: false
                    },
                    {
                        field: 'result',
                        title: 'Result',
                        visible: false
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-search"></i>详细</a> ');
                            return actions.join('');
                        }
                    }
                    ]
            ]
        };
        $.table.init(options);
    });


</script>
</body>
</html>

